[Swift] 超簡単にインパクトあるスイッチの有るビューが作れる、RAMPaperSwitchについて

SIN

2016.03.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 はじめに

RAMPaperSwitchは、UISwichを拡張したクラスで、直近のビューをアニメーションしながら塗りつぶします。手軽にストーリーボードからだけでも利用が可能です。

動作環境は、次の通りです。

iOS 8.0+
Xcode 6.1

RAMPaperSwitchは、MITライセンスで公開されており、2016年3月現在、最新は、0.0.1です。

2 使用方法

(1) 導入

新しいプロジェクトをSingle View Applicationで作成し、GitHubからダウンロードしたRAMPaperSwitch.swiftをプロジェクトにコピーするだけです。
https://github.com/Ramotion/paper-switch

(2) ストーリーボード上での使用

画面中央にUISwitchを一つ置き、そのCustom ClassをUISwitchからRAMPaperSwitchに変更します。

実行の様子は、次のとおりです。

単純にRAMPaperSwitchクラスのボタンを配置しただけで、後ろのビューをアニメーションで塗り潰す動作が実現できています。

(3) 塗りつぶすビュー

RAMPaperSwitchは、一つ上の階層のビューを塗りつぶします。

従って、下記の様に、スイッチの後ろにビューを配置すると、そのビューを塗りつぶすことになります。

実行結果は、下記の通りです。

今は、スイッチの階層上にビューを置きましたが、このビューの階層をスイッチと同じにしてみます。上下でスイッチの方が、下なので、スイッチが見えている感じです。

実行結果は、このように変わります。最初の動作に戻り、一番下のビューが塗られています。

なお、塗りつぶしの色は、On Tintで変更します。また、Durationで、アニメーションの再生時間を設定できるとドキュメントに記載されてい他のですが、ちょっと違いが分かりませんでした。

(4) イベント処理

RAMPaperSwitchは、塗りつぶしが行われるタイミングで、次の２つのイベントがブロックで記述できます。

var animationDidStartClosure = {(onAnimation: Bool) -> Void in }
var animationDidStopClosure = {(onAnimation: Bool, finished: Bool) -> Void in }

次のコードは、塗りつぶしたタイミングで、見やすいようにラベルの色を変更している例です。

class ViewController: UIViewController {

    @IBOutlet weak var paperSwitch: RAMPaperSwitch!
    @IBOutlet weak var label: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()

        self.paperSwitch.animationDidStartClosure = {(onAnimation: Bool) in
                UIView.transitionWithView(self.label, duration: self.paperSwitch.duration, options: UIViewAnimationOptions.TransitionCrossDissolve, animations: {
                    self.label.textColor = onAnimation ? UIColor.whiteColor() : UIColor.blueColor()
                },
                completion:nil)
        }
    }

    //省略
}

3 Objective-Cからの利用

Objectiv-Cのプロジェクトでも、同じようにファイルをコピーするだけで利用可能です。ストーリーボード上で利用するのであれば、これ以上の作業は必要ありません。

コードで処理する場合、Objective-CのコードからSwiftのオブジェクトを見るために、暗黙的に作成されるプロジェクト名-Swift.hをインポートします。

#import "RAMPaperSwitchSample-Swift.h"

このヘッダファイルは、Xcodeによって自動的に作成されるもので、覗いてみるおとSwiftのオブジェクト用のヘッダが生成されているのを見ることができます。

SWIFT_CLASS("_TtC20RAMPaperSwitchSample14RAMPaperSwitch")
@interface RAMPaperSwitch : UISwitch
@property (nonatomic) double duration;
@property (nonatomic, copy) void (^ __nonnull animationDidStartClosure)(BOOL);
@property (nonatomic, copy) void (^ __nonnull animationDidStopClosure)(BOOL, BOOL);
@property (nonatomic, getter=isOn) BOOL on;
- (void)setOn:(BOOL)on animated:(BOOL)animated;
- (void)layoutSubviews;
- (void)awakeFromNib;
- (void)switchChanged;
- (void)animationDidStart:(CAAnimation * __nonnull)anim;
- (void)animationDidStop:(CAAnimation * __nonnull)anim finished:(BOOL)flag;
- (nonnull instancetype)initWithFrame:(CGRect)frame OBJC_DESIGNATED_INITIALIZER;
- (nullable instancetype)initWithCoder:(NSCoder * __nonnull)aDecoder OBJC_DESIGNATED_INITIALIZER;
@end

なお、Objective-Cのプロジェクトに、最初にSwiftのファイルを追加した時、ブリッジヘッダを作成しますか？とのポップアップが出ますが、これは「Create Bridging Header」を選択して、作成する必要があります。

このブリッジファイルは、SwiftからObjective-Cを使用するときに使用するものだから必要ない考えていて、当初、「作成しない」を選んでいたのですが、これだと暗黙的に作成される上記のヘッダが正常に作成できていませんでした。（ヘッダ自体は生成されるが、Swiftオブジェクト用の定義が抜けている）

ちょっと、注意が必要ですね。